import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

const Interests = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  
  // Interests data with icons
  const interests = [
    { name: '摄影', icon: 'fa-camera' },
    { name: '篮球', icon: 'fa-basketball' },
    { name: '阅读科幻小说', icon: 'fa-book' }
  ];
  
  return (
    <motion.section
      id="interests"
      ref={ref}
      initial={{ opacity: 0, x: -50 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
      className="bg-color-card rounded-xl p-6 shadow-lg backdrop-blur-sm border border-gray-800"
    >
      <div className="flex items-center mb-6">
        <div className="w-10 h-10 rounded-full bg-color-accent flex items-center justify-center mr-4 star-glow">
          <i className="fa-solid fa-heart text-white"></i>
        </div>
        <h2 className="text-2xl font-bold text-gray-100">兴趣爱好</h2>
      </div>
      
      <div className="border-t border-gray-700 pt-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {interests.map((interest, index) => (
            <motion.div
              key={interest.name}
              initial={{ opacity: 0, y: 10 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="flex items-center p-3 rounded-lg bg-color-card-light hover:star-glow-hover transition-all duration-300 cursor-pointer"
            >
              <i className={`fa-solid ${interest.icon} text-gray-200 mr-3 text-xl`}></i>
              <span className="text-gray-300">{interest.name}</span>
            </motion.div>
          ))}
        </div>
      </div>
    </motion.section>
  );
};

export default Interests;